
const { ccclass, property } = cc._decorator;

interface ShaderItem {
    title: string,
    desc: string,
    perfabPath: string,
}

@ccclass
export default class TestList extends cc.Component {

    @property(cc.Node)
    listNode: cc.Node = null;

    @property(cc.Label)
    title: cc.Label = null;

    @property(cc.Label)
    desc: cc.Label = null;

    @property(cc.ScrollView)
    listScrollView: cc.ScrollView = null;

    @property(cc.Node)
    listItem: cc.Node = null;

    private _collections: ShaderItem[] = [
        { title: "圆角矩形", desc: "", perfabPath: "shader/RoundRectAngle" },
        { title: "描边", desc: "", perfabPath: "shader/Outline" },
        { title: "受击闪烁", desc: "", perfabPath: "shader/Bright"},
        { title: "剪影", desc: "", perfabPath: "shader/PaperCut"},
        { title: "特征色修改", desc: "", perfabPath: "shader/HSV"},
        { title: "按钮扫光", desc: "", perfabPath: "shader/CrossLight"},
        { title: "外发光", desc: "", perfabPath: "shader/OuterGlow"},
        { title: "内发光", desc: "", perfabPath: "shader/InnerGlow"},
    ]

    start() {
        for (let i = 0, len = this._collections.length; i < len; i++) {
            let info = this._collections[i];
            let node = cc.instantiate(this.listItem);
            node.children[0].getComponent(cc.Label).string = info.title;
            let tag = i;
            node.active = true;
            node.parent = this.listScrollView.content;
            node.on(cc.Node.EventType.TOUCH_END, () => {
                this._curIndex = tag;
                this.listScrollView.node.active = false;
                this.listNode.parent.active = true;
                this.showNext();
            })

        }
        this._curIndex = 0;
    }
    private _curIndex: number = 0;
    onClickNext() {
        this._curIndex = (this._curIndex + 1) % this._collections.length;
        this.showNext();
    }

    onClickBack() {
        this.listScrollView.node.active = true;
        this.listNode.parent.active = false;
    }

    showNext() {
        let info = this._collections[this._curIndex];
        this.title.string = info.title;
        this.desc.string = info.desc;
        cc.resources.load(info.perfabPath, cc.Prefab, (error: Error, assets: cc.Prefab) => {
            this.listNode.destroyAllChildren();
            let node = cc.instantiate(assets);
            node.parent = this.listNode;
        });
    }
}
